<template>
  <div class="wft-w-95">
    <el-select v-model="propValue" placeholder="请选择图标" class="wft-w-100">
      <el-option
        v-for="item in uviewIcons"
        :key="item.name"
        :label="item.name"
        :value="item.name"
      >
        <div class="wft-flex-ai">
          <i :class="`u-iconfont uicon-${item.name}`" class="wft-mr-8" />
          <span>{{ item.name }}</span>
        </div>
      </el-option>
      <template #label="{ value }">
        <div class="wft-flex-ai">
          <i :class="`u-iconfont uicon-${value}`" class="wft-mr-8" />
          <span>{{ value }}</span>
        </div>
      </template>
    </el-select>
  </div>
</template>
<script setup lang='ts'>
import { uview } from '../IconModel/source'

const uviewIcons = uview.map(item => ({ name: item.name.replace('u-iconfont uicon-', '') }))

const propValue = defineModel<string>('modelValue', { default: '' })
</script>
<style scoped>
.wft-mr-8 {
  margin-right: 8px
}
</style>